<!--
 * @Date: 2020-03-20 16:36:44
 * @LastEditors: peng qiao
 * @LastEditTime: 2020-03-24 17:53:37
 -->
<template>
  <div class="neighborhood-list" id="exit">
    <van-nav-bar title="选择社区" fixed />
    <div class="history-city-style">
      <p>历史访问社区</p>
      <ul class="city-list-style">
        <li v-for="(item, index) in villageHistoryList" :key="index" class="item-city-style"
          @click="locationVillage(item)">
          {{ item.neighborhoodName }}
        </li>
      </ul>
    </div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell v-for="item in list" :key="item.neighborhoodId" :title="item.neighborhoodName"
          @click="handleSelect(item)" />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
  import api from "@/controller/Interface.js";
  import constant from "@/controller/constant.js";
  import bus from "../../utils/eventBus";
  import {
    Dialog
  } from 'vant';
  export default {
    data() {
      return {
        list: [],
        finished: false,
        loading: false,
        isLoading: false,
        curPage: 1,
        pageSize: 10,
        villageHistoryList: []
      }
    },
    mounted() {
      if (localStorage.getItem('historyList')) {
        let arr = JSON.parse(localStorage.getItem('historyList'))
        this.villageHistoryList = arr.slice(0, 3)
      }
    },
    methods: {
      locationVillage(val) {
        let userInfo = JSON.parse(localStorage.getItem('userInfo'))
        userInfo.shequId = val.neighborhoodId
        userInfo.serviceContact = val.serviceContact
        localStorage.setItem('userInfo', JSON.stringify(userInfo))
        bus.$emit("villageName", val.neighborhoodName);
        this.$router.go(-1);
      },
      getNeighborList() {
        api.user_property_v1_find_user_neighborhood_list().then(res => {
          if (res.code === "0") {
            if (
              (res.datas && res.datas.length === 0) ||
              res.datas === null
            ) {
              // this.$toast("暂无更多数据");
              Dialog.alert({
                  title: "提示",
                  message: `当前暂无社区信息，请先绑定房屋！`
                })
                .then(() => {
                  this.$router.push({
                    name: "boundHouses"
                  });
                })
              this.loading = false;
              this.isLoading = false;
              this.finished = true;
              return;
            }
            this.$nextTick(() => {
              this.loading = false;
              this.isLoading = false;
            });
            this.list = [...this.list, ...res.datas];
            this.curPage = this.curPage + 1;
            if (res.datas.length < this.pageSize) {
              this.finished = true;
            }
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        }).catch(() => {
          this.$toast(constant.unusualMsg);
        })
      },
      onRefresh() {
        this.list = [];
        setTimeout(() => {
          this.curPage = 1;
          this.pageSize = 10;
          this.getNeighborList();
          this.isLoading = false;
        }, 500);
      },
      onLoad() {
        this.getNeighborList()
      },
      handleSelect(data) {
        api.user_property_v1_select_neighborhood(data.neighborhoodId).then(res => {
          if (res.code === "0") {
            if (localStorage.getItem('historyList')) {
              JSON.parse(localStorage.getItem('historyList')).push(data)
            } else {
              localStorage.setItem('historyList', JSON.stringify([data]))
            }
            let userInfo = JSON.parse(localStorage.getItem('userInfo'))
            userInfo.shequId = data.neighborhoodId
            userInfo.serviceContact = data.serviceContact
            localStorage.setItem('userInfo', JSON.stringify(userInfo))
            this.$router.go(-1);
            bus.$emit("villageName", data.neighborhoodName);
            // this.$emit("searchListSel", data);
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        }).catch(() => {
          this.$toast(constant.unusualMsg);
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .neighborhood-list {
    .history-city-style {
      margin-top: 10px;
      padding: 15px;
      background: #ffffff;

      p {
        font-size: 14px;
        color: #999999;
        line-height: 20px;
      }

      .city-list-style {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        .item-city-style {
          margin-top: 5px;
          margin-left: 5px;
          width: 110px;
          height: 36px;
          background: #f5f7fa;
          text-align: center;
          line-height: 36px;
          font-size: 14px;
          color: #333333;
        }
      }
    }
  }
</style>